<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<meta charset="utf-8" />
		<title>最强五子棋游戏登录页面</title>
		<style>
		.body_class{
			background-image: url(img/1.jpg);
			background-size: 100% 100%;
			height: 100%;
			display: flex;/* 设置盒子弹性模型*/
			flex-direction: row;/** 水平排列*/
			 align-items: center; /**纵向居中 */
			justify-content: center;/**横向居中 */
			
		}
		.main_div{
			height: 250px;
			width: 400px;
			background-color: bisque;
			border-radius: 10px;
			box-shadow: 10px 10px 10px #888888;
			display: flex;
			flex-direction: column;
			align-items: center;
			opacity: 0.7;
		}
		/* 标题样式 */
		.title_span{
			margin-top: 30px;
			font-size: 25px;
			font-family: "楷体";
			text-shadow: 5px 5px 5px black;
		}
		.item_div{
			margin-top: 15px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			border-radius: 10px;
		}
		
		.div_button{
			margin-top: 20px;
			border-radius: 50px;
			margin-right: 50px;
			border-radius: 10px;
		}
		.item_div1{
			margin-top: 15px;
			margin-right: 100px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			border-radius: 10px;
			
		}
		.item_div2{
			margin-top: 15px;
			margin-right: 100px;
		}
		.btn1{
			margin-left: 10px;
		}
		</style>
		<script src="js/jquery.js"></script>
		<script>
		
		//找回密码
		
		function findPassword(btn){
			//获得用户账号
			var username=$("#username").val();
			//校验
			if(username ==null || username.trim() == ""){
				alert("用户名不能为空!");
				return;
			}
			//禁用按钮
			btnDisTime(btn);
			
			
			//通过ajax请求后端发送短信
			$.ajax({
				type:"POST",
				url:"http://localhost:8080/user/sendEmailCode",
				data:{
					username:username
				},
				success:function(data){
					if(data==1){
						alert("邮件发送成功");
						return;
					}else if(data==-1){
						alert("当前用户不存在");
						//按钮恢复
						$(btn).removeAttr("disabled");
						$(btn).html("发送邮件");
						//关闭定时器
						clearTimeout(myTimeOut);
						return;
					}else if(data==-2){
						alert("邮件发送失败");
						return;
					}
				}
			});
			
		}	
		//重置密码
		function updatePassword(){
			var username=$("#username").val();
			var password=$("#password").val();
			var code=$("#code").val();
			
			
			$.ajax({
				type:"POST",
				url:"http://localhost:8080/user/updatePassword",
				data:{
					username:username,
					newpassword:password,
					code:code
				},
				success:function(data){
					if(data==1){
						alert("密码重置成功");
						location.href="index.html";
					}else if(data==-1){
						alert("无效或过期的验证码");
					}else if(data==-2){
						alert("验证码错误");
					}
				}
			});
		}
		//按钮禁用倒计时
		var time=60;
		 var myTimeOut=null;
			function btnDisTime(btn){
				//禁用按钮
				$(btn).attr("disabled","disabled");
				//改变按钮发送内容
				$(btn).html("("+time+")");
				//开启定时器
				myTimeOut=setTimeout(function(){
					time--;
					
					if(time>0){
						btnDisTime(btn);
					}else{
						$(btn).removeAttr("disabled");
						$(btn).html("发送邮件");
						time=60;
					}
					
				},1000);
			}
			
		</script>
	</head>
	<body class="body_class">
		<!-- 找回密码 -->
	
		<div class="main_div">
			<span class="title_span">找回密码</span>
			<div class="item_div">
				账号:<input id="username" placeholder="请输入用户名"/><button onclick="findPassword(this)" class="btn1">发送邮件</button>
			</div>
			<div class="item_div1">
				重置密码:<input id="password" placeholder="请输入新密码"/>
			</div>
			<div class="item_div2">
				验证码:<input id="code" placeholder="验证码" style="width: 50px;"/>
			</div>
			<div class="div_button">
				<button onclick="updatePassword()">重置密码</button>
				
			</div>
		</div>
	</body>
</html>
